<template>
    <div class="charts" ref="echarts" />
</template>
  <script>
import { blue } from 'color-name';

  
  export default {
    methods: {
      initLine(xData, seriseList ) {
        console.log(xData);
        const AllData = seriseList
        //去掉空值
        // const noEmpty = AllData.filter(item => item !== '')
        // 获取最大及最小值
        let max = 0
        let min = 0
        let option = {
          color: ['#4b4ffe'],
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            
          },
          grid: {
            left: '3%',
            right: '4%',
            top: '26%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: true,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: xData
          },
          yAxis: {
            type: 'value',
            name: '元',
            position: 'left'
          },
          series: []
        }

        for (var key in AllData) {
          const value = AllData[key]
          const maxData = Math.max(...value) + 10
          const minData = Math.min(...value)
          let type = ''
          let stack = ''
          if (key ==='预测总薪酬' ) {
            type = 'line'
            stack = 'line'
          } else {
            type = 'bar'
            stack = 'bar'
          }

          const echartsData = {
              name: key,
              type: type,
              showSymbol: false,
              stack: stack,
              smooth: true,
              data: value
          }
          option.series.push(echartsData)

          if(maxData > max) {
            max = maxData
          }
          if(minData < min) {
            min = minData
          }
        }
        option.yAxis[max] = max
        option.yAxis[min] = min

        if (!this.echarts) this.echarts = this.$echarts.init(this.$refs.echarts)
        this.echarts.clear()
        this.echarts.setOption(option)
      }
    }
  }
  </script>
  <style lang="less" scoped>
    .charts {
      width: 100%;
      height: 340px;
    }
  </style>